<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- {{topics}} -->
    <child></child>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    /* 
      axios并不是vue专有的插件，所以引入没有特定的顺序

      因为直接下载script下请求后不容易把请求到的数据设置给某些组件的数据里
      所以我们需要在组件中进行请求
      我们可以将其放在created中 （只是因为我们想要页面加载直接自动请求数据）

      如果需要在页面加载直接自动请求数据，那么我们需要在created，但是这样写会让created变得臃肿
      所以我们可以单独请求单独封装为method放在methods中，在created中调用即可
    */

    const child = {
      template: `
        <div>
          <button @click="getTopics">点击请求</button>
        {{topics}}</div>
      `,
      data () {
        return {
          topics: []
        }
      },
      methods: {
        getTopics () {
          axios.get('https://cnodejs.org/api/v1/topics', {
            params: {
              limit: 10
            }
          }).then(res => {
            // 如果请求在new Vue之外写，那么回去对应的data数据就变得更加麻烦了
            // app.topics = res.data.data
            this.topics = res.data.data
          })
        }
      },
      created () {
        // this.getTopics()
      }
    }

    Vue.component('child', child)
    const app = new Vue({
      el: "#app",
      data: {
        topics: []
      }
    })
    

    /* axios.get('https://cnodejs.org/api/v1/topics', {
      params: {
        limit: 10
      }
    }).then(res => {
      // 如果请求在new Vue之外写，那么回去对应的data数据就变得更加麻烦了
      // app.topics = res.data.data
      child.topics = res.data.data
    }) */
  </script>
</body>
</html>